<template>
  <div class="app-container">
    <el-tabs type="border-card">
      <el-tab-pane label="网站信息">
        <el-form ref="form" :model="webIntroduce" label-width="100px">
          <el-form-item label="网站背景">
            <image-upload
              ref="myStaffPhoto1"
              :is-thumbnail="true"
              @updata-url="onUpdateBackground"
            />
          </el-form-item>
          <el-form-item label="用户默认头像">
            <image-upload ref="myStaffPhoto2" @updata-url="onUpdateAvatarDef" />
          </el-form-item>
          <el-form-item label="网站名称">
            <el-input v-model="webIntroduce.name" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="webIntroduce.describe" />
          </el-form-item>
          <el-form-item label="备案号">
            <el-input v-model="webIntroduce.record" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit(webIntroduce.id)"
            >提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="作者信息">
        <el-form ref="form" :model="webIntroduce" label-width="100px">
          <el-form-item label="作者头像">
            <image-upload ref="myStaffPhoto3" @updata-url="onUpdateAvatar" />
          </el-form-item>
          <el-form-item label="昵称">
            <el-input v-model="webIntroduce.author" />
          </el-form-item>
          <el-form-item label="简介">
            <el-input v-model="webIntroduce.summary" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="webIntroduce.email" />
          </el-form-item>
          <el-form-item label="微信">
            <el-input v-model="webIntroduce.weChat" />
          </el-form-item>
          <el-form-item label="QQ">
            <el-input v-model="webIntroduce.qq" />
          </el-form-item>
          <el-form-item label="gitee">
            <el-input v-model="webIntroduce.gitee" />
          </el-form-item>
          <el-form-item label="github">
            <el-input v-model="webIntroduce.github" />
          </el-form-item>
          <el-form-item label="关于我">
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :default-config="toolbarConfig"
                :mode="mode"
              />
              <Editor
                v-model="webIntroduce.about"
                style="height: 500px; overflow-y: hidden"
                :default-config="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit(webIntroduce.id)"
            >提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="公告管理">
        <el-form ref="form" :model="webIntroduce" label-width="100px">
          <el-form-item label="公告内容">
            <el-input v-model="webIntroduce.notice" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit(webIntroduce.id)"
            >提交</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 引入腾讯云
const cos = new COS({
  SecretId: 'AKIDKUO2PVKtCDxSgeKfla8PQAdplRpwnOhk', // 身份识别 ID
  SecretKey: 'nKaZHjuoWx70c2C5h26vTkkTv61f28xV' // 身份密钥
})
import { getWebIntroduceAPI, putWebIntroduceAPI } from '@/api/introduce'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { Message } from 'element-ui'
export default {
  components: { Editor, Toolbar },
  data() {
    return {
      webIntroduce: {},
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 上传图片
          uploadImage: {
            maxFileSize: 1 * 1024 * 1024,
            maxNumberOfFiles: 5,
            allowedFileTypes: ['image/*'],
            timeout: 5 * 1000,
            customUpload(file, insertFn) {
              // 执行上传操作 上传到cos
              cos.putObject(
                {
                  Bucket: 'jlgl-1313037814',
                  Region: 'ap-guangzhou',
                  Key: file.name,
                  Body: file,
                  StorageClass: 'STANDARD'
                },
                (err, data) => {
                  console.log(err || data)
                  const url = 'http://' + data.Location
                  insertFn(url)
                }
              )
            }
          }
        }
      },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {
    this.getWebIntroduce()
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    async getWebIntroduce() {
      const res = await getWebIntroduceAPI()
      this.webIntroduce = res.data
      this.$refs['myStaffPhoto1'].fileList = [
        { url: this.webIntroduce.background, upload: true }
      ]
      this.$refs['myStaffPhoto2'].fileList = [
        { url: this.webIntroduce.avatar_def, upload: true }
      ]
      this.$refs['myStaffPhoto3'].fileList = [
        { url: this.webIntroduce.avatar, upload: true }
      ]
    },
    onUpdateBackground(url) {
      this.webIntroduce.background = url
    },
    onUpdateAvatarDef(url) {
      this.webIntroduce.avatar_def = url
    },
    onUpdateAvatar(url) {
      this.webIntroduce.avatar = url
    },
    async onSubmit(id) {
      await putWebIntroduceAPI(id, this.webIntroduce)
      Message.success('更新成功')
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    }
  }
}
</script>

<style lang="scss" scoped></style>
